/*! 
 * WeX5 v3 (http://www.justep.com) 
 * Copyright 2015 Justep, Inc.
 * Licensed under Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0) 
 */
define(function(require) {
	var CommonStyle = require("$UI/wxsys/comps/designerCommon/js/commonStyle");
	var CommonProp = require("$UI/wxsys/comps/designerCommon/js/commonProp");
	require("css!$UI/wxsys/comps/designerCommon/css/default.css").load();
	require("css!../css/contactbtn").load();
	require("css!./css/contactbtn").load();
	var $ = require("jquery");
	var xuiService = require("$UI/system/components/designerCommon/js/xuiService");
	var xuiDoc = xuiService.getXuiDoc();
	// var ViewComponent = require("$UI/system/lib/base/viewComponent");
	var Button = require("$UI/wxsys/comps/button/designer/button")["wx:button"];
	var contactbtn = Button.extend({
	});
	var webIdeEx = {
		"contactbtnComp:contactbtn" : {
			styleConfig : function(ownerDesigner) {
				return [ 
				         
		         {
					text : '预定义样式',
					id : "preStyle",
					noLabel : false,// 不显示标签
					isGroup : true,

					// 可选数据
					items : [ {
						name : 'type',
						isStyle:false,
						noLabel : true,// 不显示标签
						// 可选数据
						optionData : [ {
							propName : "type",
							value : "default",
							text : "<button class='WxButton' type='default' style='height:34px;line-height:30px;margin:5px'>default</button>"
						}, {
							propName : "type",
							value : "primary",
							text : "<button class='WxButton' type = 'primary' style='height:34px;line-height:30px;margin:5px'>primary</button>"
						}, {
							propName : "type",
							value : "warn",
							text : "<button class='WxButton' type='warn' style='height:34px;line-height:30px;margin:5px'>warn</button>"
						} ],
						editor : "listEditor"
					} ]
				}, {
					id : "size",
					text : '尺寸样式',
					isGroup : true,
					items : [ {
						name : 'size',
						isStyle:false,
						noLabel : true,// 不显示标签
						// 可选数据
						optionData : [ {
							propName : "size",// 属性名
							value : "default",// 属性值
							text : "<button class='WxButton' type='default' size='default' style='height:34px;line-height:30px;margin:6px'>default</button>"
						}, {
							propName : "size",
							value : "mini",
							text : "<button class='WxButton' size='mini' style='height:34px;line-height:30px;margin:6px'>mini</button>"
						} ],
						editor : "listEditor"
					} ]
				}, {
					id : "plain",
					text : '是否镂空',
					isGroup : true,
					items : [ {
						isStyle:false,
						name : 'plain',
						noLabel : true,// 不显示标签
						// 可选数据
						optionData : [ {
							propName : "plain",// 属性名
							value :"true",// 属性值
							text : "<button class='WxButton' type='warn' data-prop-plain style='height:34px;line-height:30px;margin:6px'>镂空</button>"
						}, {
							propName : "plain",
							value : "false",
							text : "<button class='WxButton' type='warn' style='height:34px;line-height:30px;margin:6px'>填充</button>"
						} ],
						editor : "listEditor"
					} ]
				}, {
					id : "loading",
					text : 'loading',
					isGroup : true,
					items : [ {
						isStyle:false,
						name : 'loading',
						noLabel : true,// 不显示标签
						// 可选数据
						optionData : [ {
							propName : "loading",// 属性名
							value : "true",// 属性值
							text : "<button class='WxButton' type='defalult' data-prop-loading style='height:34px;line-height:30px;margin:6px'>loading</button>"
						}, {
							propName : "loading",
							value : "false",
							text : "<button class='WxButton' type='defalult' style='height:34px;line-height:34px;margin:6px'>default</button>"
						} ],
						editor : "listEditor"
					} ]
				},{
	    			text : '图标',
	    			id:"icon",
	    			isGroup:true,
	    			items : [ {
	    			name:'icon',
	    			noLabel : true,//不显示标签
	    			selectMode:"0", //选中无状态变化
	    			//可选数据
	    			optionData : [ {
	    					propName : "icon",//属性名
	    					name:"icon",
	    					value : "",//属性值
	    					text : "<a class='font-icon-a linear ' style='font-size: 20px;'>无</a>"
	    				} ,{
	    					propName : "icon",//属性名
	    					name:"icon",
	    					value : "linear linear-sync",//属性值
	    					text : "<a class='font-icon-a linear linear-sync' style='font-size: 19px;padding: 0px 3px;'></a>"
	    				},{
	    					propName : "icon",
	    					name:"icon",
	    					value : "linear linear-users",
	    					text : "<a class='font-icon-a linear linear-users' style='font-size: 19px;padding: 0px 3px;'></a>"
	    				},{
	    					propName : "icon",//属性名
	    					name:"icon",
	    					value : "linear linear-user",//属性值
	    					text : "<a class='font-icon-a linear linear-user' style='font-size: 19px;padding: 0px 3px;'></a>"
	    				},{
	    					propName : "icon",//属性名
	    					name:"icon",
	    					value : "linear linear-undo",//属性值
	    					text : "<a class='font-icon-a linear linear-undo' style='font-size: 19px;padding: 0px 3px;'></a>"
	    				},{
	    					propName : "icon",//属性名
	    					name:"icon",
	    					value : "linear linear-trash",//属性值
	    					text : "<a class='font-icon-a linear linear-trash' style='font-size: 19px;padding: 0px 3px;'></a>"
	    				},{
	    					propName : "icon",//属性名
	    					name:"icon",
	    					value : "linear linear-bubble",//属性值
	    					text : "<a class='font-icon-a linear linear-bubble' style='font-size: 19px;padding: 0px 3px;'></a>"
	    				},{
	    					propName : "icon",//属性名
	    					name:"icon",
	    					value : "linear linear-chevronleft",//属性值
	    					text : "<a class='font-icon-a linear linear-chevronleft' style='font-size: 19px;padding: 0px 3px;'></a>"
	    				},{
	    					propName : "icon",//属性名
	    					name:"icon",
	    					value : "linear linear-chevronright",//属性值
	    					text : "<a class='font-icon-a linear linear-chevronright' style='font-size: 19px;padding: 0px 3px;'></a>"
	    				},{
	    					propName : "icon",//属性名
	    					name:"icon",
	    					value : "linear linear-chevronup",//属性值
	    					text : "<a class='font-icon-a linear linear-chevronup' style='font-size: 18px;padding: 0px 3px;'></a>"
	    				}, {
	    					propName : "icon",
	    					name:"icon",
	    					value : "linear linear-cog",
	    					text : "<a class='font-icon-a linear linear-cog' style='font-size: 18px;padding: 0px 3px;'></a>"
	    				}, {
	    					propName : "icon",
	    					name:"icon",
	    					value : "linear linear-cross",
	    					text : "<a class='font-icon-a linear linear-cross' style='font-size: 17px;padding: 0px 3px;'></a>"
	    				}, {
	    					propName : "icon",
	    					name:"icon",
	    					value : "linear linear-arrowupcircle",
	    					text : "<a class='font-icon-a linear linear-arrowupcircle' style='font-size: 19px;padding: 0px 3px;'></a>"
	    				}, {
	    					propName : "icon",
	    					name:"icon",
	    					value : "linear linear-arrowup",
	    					text : "<a class='font-icon-a linear linear-arrowup' style='font-size: 19px;padding: 0px 3px;'></a>"
	    				}, {
	    					propName : "icon",
	    					name:"icon",
	    					value : "linear linear-arrowrightcircle",
	    					text : "<a class='font-icon-a linear linear-arrowrightcircle' style='font-size: 19px;padding: 0px 3px;'></a>"
	    				},{
	    					propName : "icon",
	    					name:"icon",
	    					value : "e-commerce e-commerce-jiahao",
	    					text : "<a class='font-icon-a e-commerce e-commerce-jiahao' style='font-size: 19px;padding: 0px 3px;'></a>"
	    				},{
	    					propName : "icon",
	    					name:"icon",
	    					value : "e-commerce e-commerce-gou",
	    					text : "<a class='font-icon-a e-commerce e-commerce-gou' style='font-size: 19px;padding: 0px 3px;'></a>"
	    				}],
	    				editor : "listEditor"
	    			}]
	    		},{
	    			id:"iconPosition",
	    			text : '图标位置',
	    			isGroup:true,
	    			items : [ {
	    			name:'class',
	    			noLabel : true,//不显示标签
	    			//可选数据
	    			optionData : [ {
    					propName : "class",//属性名 btn-icon-left btn-icon-top btn-icon-bottom btn-icon-right
    					value : "",//属性值
    					text : "<button class='btn btn-default ' style='margin:6px;width:50px;'>默认</button>"
    				}, {
    					propName : "class",//属性名 btn-icon-left btn-icon-top btn-icon-bottom btn-icon-right
    					value : "wx-btn-icon-left",//属性值
    					text : "<button class='btn btn-default ' style='margin:6px;width:50px;'>居左</button>"
    				}, {
    					propName : "class",
    					value : "wx-btn-icon-top",
    					text : "<button class='btn btn-default ' style='margin:6px;width:50px;'>居上</button>"
    				}, {
    					propName : "class",
    					value : "wx-btn-icon-bottom",
    					text : "<button class='btn btn-default ' style='margin:6px;width:50px;'>居下</button>"
    				}, {
    					propName : "class",
    					value : "wx-btn-icon-right",
    					text : "<button class='btn btn-default ' style='margin:6px;width:50px;'>居右</button>"
    				}],
	    			editor : "listEditor"
	    		}]
	    		},{
	    			id:"displayStyle",
	    			text : '按钮展现形式',
	    			isGroup:true,
	    			items : [ {
	    			name:'class',
	    			noLabel : true,//不显示标签
	    			//可选数据
	    			optionData : [ {
    					propName : "class",
    					value : "",
    					text : "<button class='btn btn-default e-commerce e-commerce-tupian' style='margin:6px'>默认全显示</button>"
	    				}, {
	    					propName : "class",//属性名 btn-icon-left btn-icon-top btn-icon-bottom btn-icon-right
	    					value : "wx-btn-only-icon",//属性值
	    					text : "<button class='btn btn-default btn-icon-left e-commerce e-commerce-tupian' style='margin:6px'>只显示图标</button>"
	    				}, {
	    					propName : "class",
	    					value : "wx-btn-only-label",
	    					text : "<button class='btn btn-default' style='margin:6px;'>只显示文本</button>"

	    				}],
	    			editor : "listEditor"
	    			}]
	    		},{
	    			text : '形状',
	    			id:"shage",
	    			isGroup:true,
	    			
	    			//可选数据
	    			items : [{
	    				name : 'class',
	    				noLabel : true,//不显示标签
	    				optionData : [ 
	    		    	   {propName:"class",value:"",text:"<button class='btn btn-default' style='margin:6px;width:50px;'>默认</button>"}, 
	    				   {propName:"class",value:"wx-btn-circle",text:"<button class='btn btn-default ' title='控制高宽相等达到正圆效果' style='margin:6px;width: 40px;height: 40px;border-radius: 50%;'>圆</button>"}, 
	    				   ],
	    				editor : "listEditor"
	    			}]
	    		}/*,{
					name: "hover-start-time",
					text: "延迟时间",
					noLabel : false
				},{
					name: "hover-stay-time",
					text: "保留时间",
					noLabel : false
				}*/].concat(CommonStyle.styleConfig(ownerDesigner));
			}
		}
	};
	var quickIdeEx = {
		"contactbtnComp:contactbtn" : {
			properties : [ {name:"label",text:"显示名称"}, "disabled",{
				name: "hover-start-time",
				text: "延迟时间",
				noLabel : false
			},{
				name: "hover-stay-time",
				text: "保留时间",
				noLabel : false
			},
			CommonProp.bind_button()],
			events: [],
			styleConfig : function(ownerDesigner) {
				return ownerDesigner.getCompStyleItems("contactbtnComp:contactbtn");
			}
		}
	}
	return {
		'contactbtnComp:contactbtn' : contactbtn,
		webIdeEx : webIdeEx,
		quickIdeEx : quickIdeEx
	};
});